<template>
  <div class="m-25 mt-65">
    <div class="normal-box-mod">
      <div class="normal-box-hd clearfix">
        <div class="normal-box-title">
          <div class="decorate-square"></div>
          <h2>ATM初始化信息</h2>
        </div>
      </div>
      <Card style="margin-bottom: 10px;">
        <div class="normal-list-page-hd clearfix">

              <Col span="5" class="mr-10">
              <queryData @ProvinceData="childByValue"></queryData>
              </Col>
                <Input class="mr-10" placeholder="机器编号" v-model="queryData.machineCode"  style="width:200px;" />
                <Button type="primary" custom-icon="iconfont icon-chaxun" size="small" @click="inQuire">查询</Button>
           
        
        </div>
      </Card>
      <div class="normal-box-bd">
        <div class="normal-list-page-mod">
          <div class="normal-list-page-bd">
            <Table border :loading="list.loading" :columns="list.columns" :data="list.tableData"></Table>
          </div>
          <div>
            <Page :total="queryData.totalRecord" :page-size="queryData.pageSize" :current="queryData.page" show-total
              show-elevator @on-change="changePage"></Page>
            <!-- <span style="float: right;">共{{queryData.totalRecord}}条数据</span> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import initparamApi from "@/api/base_sys/ATMInitialize.js";
  import moment from "moment";
  import {
    Message
  } from "iview";
  import queryData from "@/view/test/cityTestZj.vue"

  export default {
    components: {
      queryData
    },
    data() {
      return {
        queryForm: {
          cityCascade: {
            data: [{
              id: '',
              name: '请选择'
            }],
            provid: [],
            cityid: [],
            distid: [],
            strt: [],
            commid: [],
            comminid: [],

          },
        },
        // 弹出层数据
        modal: {
          system: {
            rules: {
              machineCode: [{
                required: true,
                message: "请填写机器编号",
                trigger: "blur"
              }],
              machineName: [{
                required: true,
                message: "请填写机器名称",
                trigger: "blur"
              }],
              paraKey: [{
                required: true,
                message: "请填写参数编号",
                trigger: "blur"
              }],
              paraValue: [{
                required: true,
                message: "请填写参数值",
                trigger: "blur"
              }]
            },
            formData: {
              // id: undefined,
              // name: "",
              // url: "",
              // state: ""
            }
          }
        },
        // 列表
        list: {
          loading: false,
          selections: [],
          // 列表展示数据
          tableData: [],
          // 表格表头
          columns: [{
              title: "机器编号",
              key: "machineCode",
              align: "center",
              minWidth:100
            },
            {
              title: "机器名称",
              key: "machineName",
              align: "center",
              minWidth:100
            },
            {
              title: "参数编号",
              key: "paraKey",
              align: "center",
              minWidth:100
            },
            {
              title: "参数值",
              key: "paraValue",
              align: "center",
              minWidth:100
            },
            {
              title: "优先级别",
              key: "synPriority",
              align: "center",
              minWidth:100,
              render: (h, params) => {
                if (params.row.synPriority == '1') {
                  return h('div', '终端优先');
                } else {
                  return h('div', '平台优先');
                }
              }

            },
            {
              title: "参数描述",
              key: "paraDesc",
              align: "center",
              minWidth: 100
            }, {
              title: "下个参数",
              key: "nextKey",
              align: "center",
              minWidth:100
            },
            {
              title: "创建人员",
              key: "insertName",
              align: "center",
              minWidth:100
            },
            {
              title: "创建时间",
              key: "insertTime",
              align: "center",
              minWidth:150
            },
          ]
        },
        // 页面查询数据
        queryData: {
          limit: 10,
          page: 1,
          totalRecord: 0,
        }
      }
    },
    methods: {
      click() {
        let getCities = this.value;
      },
      // 获取列表
      getTableData() {
        const that = this;
        that.queryData.totalRecord = undefined;
        initparamApi.getPageList(that.queryData)
          .then(res => {
            that.list.tableData = res.data.list;
            that.queryData.totalRecord = res.data.totalRecord;
            that.queryData.limit = res.data.pageSize;
          })
          .catch(error => {
            Message.error(error);
          });
      },
      childByValue(newObject) {
        this.queryData.provid = newObject.provid;
        this.queryData.commid = newObject.commid;
        this.queryData.cityid = newObject.cityid;
        this.queryData.comminid = newObject.comminid;
        this.queryData.distid = newObject.distid;
        this.queryData.strt = newObject.strt;
      },
      //查询
      inQuire() {
				this.queryData.page=1;
        this.getTableData();
      },
      //每页显示记录数变更
      onPageSizeChange(pageSize) {
        this.queryData.limit = pageSize;
        this.getTableData();
      },
      // 换页
      changePage(page) {
        this.queryData.page = page;
        this.getTableData();
      },
    },

    created() {
      this.getTableData();
    }
  };
</script>
